<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>商品评论无刷新分页</title>
    <style>
      a:link,a:visited{color: #222;text-decoration: none;}
      a:hover{color: #fd4913;}
      ul li{line-height: 38px;font-size: 18px;}
      .box{text-align: center;}
      body{background:#eee;margin:0}
      .box{width:800px;margin:0 auto;background:#fefefe;border-radius:8px;padding:20px;box-sizing:border-box;margin-top:40px}
      .title{font-family:'Microsoft YaHei';color:#666;font-size:24px;text-align:center;margin:10px 0}
      .comment ul{margin:0;padding:10px;list-style:none;border-bottom:1px solid #ccc}
      .comment li{line-height:32px}
      .pagelist{margin-top:20px;text-align:center}
      .pagelist span{margin:0 2px}
      .pagelist button{padding:6px 10px;cursor:pointer}
      .pagelist button:disabled{cursor:default}
      .progress div{width:0%;height:1px;position:fixed;top:0;background-color:#38f;box-shadow:1px 1px 1px #6bf;transition: all 0.8s}
    </style>
  </head>
  <body>
    <div id="progress" class="progress"></div>
    <div class="box">
      <div class="title">查看商品评论</div>
      <div id="comment" class="comment"></div>
      <div class="pagelist">
        <p>当前是第<span id="page_num">1</span>页</p>
        <button id="page_first">首页</button>
        <button id="page_prev">上一页</button>
        <button id="page_next">下一页</button>
        <button id="page_last">尾页</button>
      </div>
    </div>
    <script>
      (function() {
        function PageList(json) {
          for (var i in json) {
            this[i] = json[i];
          }
          var obj = this;
          this.first.onclick = function() {
            obj.page = 1;
            obj.onChange();
          };
          this.prev.onclick = function() {
            obj.page = (obj.page > 1) ? (obj.page - 1) : 1;
            obj.onChange();
          };
          this.next.onclick = function() {
            obj.page = (obj.page >= obj.maxPage) ? obj.maxPage : (obj.page + 1);
            obj.onChange();
          };
          this.last.onclick = function() {
            obj.page = obj.maxPage;
            obj.onChange();
          };
        }
        PageList.prototype.updateStatus = function() {
          this.first.disabled = (this.page <= 1);
          this.prev.disabled = (this.page <= 1);
          this.next.disabled = (this.page >= this.maxPage);
          this.last.disabled = (this.page >= this.maxPage);
          this.pageNum.innerHTML = this.page;
        };
        function Comment(obj) {
          this.obj = obj;
        }
        Comment.prototype.ajax = function(url, start, complete) {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
              if (xhr.status < 200 || xhr.status >= 300 && xhr.status !== 304) {
                alert('服务器异常');
                return;
              }
              try {
                var obj = JSON.parse(xhr.responseText);
              } catch(e) {
                alert('解析服务器返回信息失败');
                return;
              }
              complete(obj);
            }
          };
          xhr.open('GET', url);
          xhr.send();
          start();
        };
        Comment.prototype.create = function(data) {
          var html = '';
          for (var i in data) {
            html += '<ul><li>用户名：' + data[i].user + '　发表时间：' + data[i].time + '</li>';
            html += '<li>' + data[i].content + '</li></ul>';
          }
          this.obj.innerHTML = html;
        };
        function ProgressBar(container) {
          this.container = container;
          this.div = document.createElement('div');
          this.container.appendChild(this.div);
        }
        ProgressBar.prototype.show = function() {
          this.div.style.width = '70%';
        };
        ProgressBar.prototype.complete = function() {
          var div = this.div;
          var container = this.container;
          div.style.width = '100%';
          setTimeout(function() {
            div.style.opacity = 0;
            setTimeout(function() {
              container.removeChild(div);
            }, 300);
          }, 500);
        };
        var QueryString = {
          get: function() {
            return location.search.substr(1);
          },
          set: function(str) {
            history.pushState(null, null, '?' + str);
          },
          find: function(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = this.get().match(reg);
            return r ? unescape(r[2]): null;
          },
          getPage: function() {
            var page = parseInt(this.find('page'));
            return (isNaN(page) || (page < 1)) ? 1 : page;
          }
        };
        var comment = new Comment(document.getElementById('comment'));
        var progressBar;
        var progressContainer = document.getElementById('progress');
        var pageList = new PageList({
          page: QueryString.getPage(),
		  maxPage: 1,
          first: document.getElementById('page_first'),
          prev: document.getElementById('page_prev'),
          next: document.getElementById('page_next'),
          last: document.getElementById('page_last'),
          pageNum: document.getElementById('page_num'),
          onChange: function() {
            comment.ajax('data.php?page=' + this.page, function() {
              progressBar = new ProgressBar(progressContainer);
              progressBar.show();
            }, function(obj) {
              pageList.maxPage = obj.maxPage;
              pageList.updateStatus();
              comment.create(obj.data);
              QueryString.set('page=' + pageList.page);
              progressBar.complete();
            });
          }
        });
        pageList.onChange();
      })();
    </script>
    <p><a href="../第十章.html">返回第十章</a></p>
  </body>
</html>